import React, { PureComponent } from 'react';
import moment from 'moment';
import { connect } from 'dva';
import { Form, Layout, DatePicker, Input, Select, Button, Table, Modal, Pagination } from 'antd';
import styles from './index.less';
import _ from 'lodash';

const { Content } = Layout;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { confirm } = Modal;

const CONDITIONS = [
  { label: '时间', field: 'filterTime', type: 'dateRange' },
  { label: '单位', field: 'filterType', type: 'select', placeholder: '请选选择类型' }
];

class Index extends PureComponent {
  constructor(props) {
    super(props);
    this.modularName = 'dutyNotesNew';
    const { global } = props;
    const { currentUnit = {} } = global;

    this.state = {

    };
  }

  componentDidMount() {

  }

  componentDidUpdate(preProps, preState) {

  }

  onChangeUnit = (value) => {
    console.log(`selected ${value}`);
  }

  onSearch = (val) => {
    console.log('search:', val);
  }

  //重置
  clearQueryDatas = () => {
    this.setState({ current: 1 });
    this.props.form.resetFields();
  };


  render() {
    const { } = this.state;
    const { dispatch, loading, form, global, modular } = this.props;
    const { getFieldDecorator } = form;
    const { currentUnit = {} } = global;
    const { } = modular;

    const columns = [
      {
        title: '单位名称',
        dataIndex: 'eventTitle',
        ellipsis: true,
        width: 200,
      },
      {
        title: '抽查时间',
        dataIndex: 'eventSubordinateUnit',
        ellipsis: true,
        width: 200,
      },
      {
        title: '是否接通',
        dataIndex: 'dutyAddress',
        ellipsis: true,
        width: 200,
      },
      {
        title: '通话时长',
        dataIndex: 'eventBrief',
        ellipsis: true,
        width: 200,
      },
      {
        title: '操作',
        dataIndex: 'operate',
        align: 'center',
        width: 200,
        fixed: 'right',
        render: (text, record) => {
          return (
            <div className={styles.common_span_group}>
              <span>查看</span>
            </div>
          );
        }
      }
    ];
    return (
      <Layout className={styles.basic_layout_wrapper}>
        <div className={styles.title}>
          当前单位: <span style={{ color: 'rgb(27, 139, 236)' }}>{currentUnit.unit_name}</span>
        </div>
        <div className={styles.conditions_wrapper}>
          {CONDITIONS.map(item => {
            if (item.type === 'dateRange') {
              return (
                <div key={item.field} className={styles.item_wrapper}>
                  <div>{item.label}</div>
                  <div>
                    {getFieldDecorator(
                      'filterTime',
                      {},
                    )(<RangePicker style={{ width: 300 }} allowClear={false} />)}
                  </div>
                </div>
              );
            }
            if (item.type === 'select') {
              return (
                <div key={item.field} className={styles.item_wrapper}>
                  <div>{item.label}</div>
                  <div>
                    {getFieldDecorator(
                      'filterType',
                      {},
                    )(
                      <Select
                        showSearch
                        style={{ width: 200 }}
                        optionFilterProp="children"
                        onChange={this.onChangeUnit}
                        onSearch={this.onSearch}
                        filterOption={(input, option) =>
                          option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                        }
                      >
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="tom">Tom</Option>
                      </Select>
                    )}
                  </div>
                </div>
              )
            }
          })}
          <div className={styles.item_wrapper}>
            <Button
              icon="redo"
              style={{ marginRight: 16, minWidth: 90, marginBottom: 16 }}
              onClick={this.clearQueryDatas}
            >
              重置
            </Button>
            <Button
              type="primary"
              icon="search"
              style={{ minWidth: 90, marginBottom: 16 }}
            // onClick={this.queryList.bind(this)}
            >
              查询
            </Button>
          </div>
          <div className={styles.item_wrapper} style={{ float: 'right', marginRight: 0 }}>
            <Button
              icon="cloud-download"
              className={styles.common_btn_type_orange}
            // onClick={this.exportBtnClick}
            >
              导出
            </Button>
          </div>
        </div>
        <Content className={styles.conditions_wrapper} style={{ margin: 0 }}>
          <Layout style={{ backgroundColor: 'transparent', height: '100%' }}>
            <Content className={styles.common_table_wrapper}>
              <Table
                columns={columns}
                dataSource={[]}
                // loading={}
                pagination={false}
                // rowKey={rowKey}
                scroll={{ x: true }}
              />
            </Content>
            <div style={{ margin: '16px 0' }}>
              {/* <Pagination
                current={current}
                pageSize={pageSize}
                total={total}
                showQuickJumper
                showSizeChanger
                showTotal={(total, range) => `共有 ${total} 条数据`}
                onChange={this.onChange}
                onShowSizeChange={this.onShowSizeChange}
              /> */}
            </div>
          </Layout>
        </Content>
      </Layout>
    );
  }
}

export default connect(({ loading, global, dutyNotesNew, unit }) => ({
  loading,
  global,
  modular: dutyNotesNew,
  unit,
}))(Form.create()(Index));
